<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Login</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="/js/jquery-2.1.1.min.js"><\/script>')</script>

	<!-- 引入Vue -->
	<script src="/js/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" type="text/css" href="/css/elementui.css">
	<!-- 引入组件库 -->
	<script src="/js/elementui.js"></script>
	<!-- 引入axios -->
	<script src="/js/axios.js"></script>

	<link rel="stylesheet" media="screen" href="/css/style.css">
	<link rel="stylesheet" type="text/css" href="/css/reset.css"/>
</head>
<body>
<div id="particles-js">
</div>
<div id="app">
	<div class="login">
		<div class="login-top">
			登录
		</div>
		<div class="login-center clearfix">
			<div class="login-center-img"><img src="/img/name.png"/></div>
			<div id="username-box" class="login-center-input">
				<input id="username" type="text" name="" value="" placeholder="请输入您的用户名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/>
				<div id="username-tip" class="login-center-input-text">用户名</div>
			</div>
		</div>
		<div class="login-center clearfix">
			<div class="login-center-img"><img src="/img/password.png"/></div>
			<div id="password-box" class="login-center-input">
				<input id="password" type="password" name=""value="" placeholder="请输入您的密码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/>
				<div id="password-tip" class="login-center-input-text">密码</div>
			</div>
		</div>
		<div class="login-button">
			登陆
		</div>
	</div>
	<div class="sk-rotating-plane"></div>
</div>

<!-- scripts -->
<script src="/js/particles.min.js"></script>
<script src="/js/app.js"></script>
<script type="text/javascript">
	//vue
	let vue = new Vue({
		el: '#app',
		data() {
			return {

			};
		},
		methods: {
			tipInfo(message,type) {
				this.$message({
					showClose: true,
					message: message,
					type: type
				});
			},
			handleLogin(username,password){
				axios.get('http://localhost:8088/login', {
					params: {
						username: username,
						password: password
					}
				})
					.then(function (response) {
						if(response.data) {
							document.write(response.data);
						}else
							vue.tipInfo('账号或密码错误！','error');
					})
					.catch(function (error) {
						console.log(error);
					});
			}
		},
		filters: {

		},
		mounted () {

		}
	});

	$("#username").focus(function(){
		$("#username-box").addClass("border-normal");
		$("#username-tip").addClass("border-tip-normal");
	});
	$("#username").blur(function(){
		$("#username-box").removeClass("border-normal");
		$("#username-tip").removeClass("border-tip-normal");
		let user = $("#username").val();
		if(user == ''){
			$("#username-box").addClass("border-error");
			$("#username-tip").addClass("border-tip-error");
		}else{
			$("#username-box").removeClass("border-error");
			$("#username-tip").removeClass("border-tip-error");
		}
	});
	$("#password").focus(function(){
		$("#password-box").addClass("border-normal");
		$("#password-tip").addClass("border-tip-normal");
	});
	$("#password").blur(function(){
		$("#password-box").removeClass("border-normal");
		$("#password-tip").removeClass("border-tip-normal");
		let pwd = $("#password").val();
		if(pwd == ''){
			$("#password-box").addClass("border-error");
			$("#password-tip").addClass("border-tip-error");
		}else {
			$("#password-box").removeClass("border-error");
			$("#password-tip").removeClass("border-tip-error");
		}
	});
	$(".login-button").click(function (){
		let user = $("#username").val();
		let pwd = $("#password").val();
		if(user == ''){
			$("#username-box").removeClass("border-normal");
			$("#username-tip").removeClass("border-tip-normal");
			$("#username-box").addClass("border-error");
			$("#username-tip").addClass("border-tip-error");
		}
		if(pwd == ''){
			$("#password-box").removeClass("border-normal");
			$("#password-tip").removeClass("border-tip-normal");
			$("#password-box").addClass("border-error");
			$("#password-tip").addClass("border-tip-error");
		}
		if(user != '' && pwd != ''){
			loginIn(user,pwd);
		}else{
			vue.tipInfo('用户名或密码错误！','error');
		}
	});
	function hasClass(elem, cls) {
		cls = cls || '';
		if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
		return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
	}

	function addClass(ele, cls) {
		if (!hasClass(ele, cls)) {
			ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
		}
	}

	function removeClass(ele, cls) {
		if (hasClass(ele, cls)) {
			var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
			while (newClass.indexOf(' ' + cls + ' ') >= 0) {
				newClass = newClass.replace(' ' + cls + ' ', ' ');
			}
			ele.className = newClass.replace(/^\s+|\s+$/g, '');
		}
	}

	function loginIn(user,pwd){
		addClass(document.querySelector(".login"), "active")
		setTimeout(function(){
			addClass(document.querySelector(".sk-rotating-plane"), "active")
			document.querySelector(".login").style.display = "none"
		},800)
		setTimeout(function(){
			removeClass(document.querySelector(".login"), "active")
			removeClass(document.querySelector(".sk-rotating-plane"), "active")
			document.querySelector(".login").style.display = "block"
			vue.handleLogin(user,pwd);
		},5000)

	}
</script>
</body>
</html>